<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
      <button>按钮1</button>
      <button>按钮2</button>
      <button>按钮2</button>
</body>
<script>

    //闭包

    // let fu =  function(name){
    //     console.log("函数内",name);
    //     return{
    //         hi:function(){
    //             return name;
    //         }
    //     }
    // }
    // let obj = fu('seti');
    // console.log('函数外',obj.hi());
    
    //闭包作用域的问题
    
    // function test(){
    //     var x = 1;
    //     return  function(){
    //         x++;
    //         console.log(x);
    //     }
    // }
    // let m1 = test();
    // let m2 = test();
    // m1();//2
    // m1();//3
    // m1();//4
    // m2();//? m1和m2的作用域都是 独立 的 不是共用的 所以这里的m2会重新计算 结果是 2
    
    //闭包没有控制好的案例
    // var btns =  document.querySelectorAll('button');
    // //解决方法 写一个闭包 因为闭包是一个独立空间
    // function test(x){
    //     return function(){
    //         alert(x);
    //     }
    // }
    // for(var i=0;i<btns.length;i++){
    //     btns[i].onclick = test(i);
    // }

    //闭包实现封装 
    var stu = function(){
        var name = '默认名字';
        return {
            getName:function(){
                return name;
            },
            setName:function(na){
                name = na
            }
        }
    }();

    console.log('外',stu.name);
    stu.setName('瑟提');
    console.log('内',stu.getName());


</script>
</html>